<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/js/layui.js"></script>
</head>
<body>
    <div class="layui-fluid">
        <form action="#" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                    <!--
                        required: 浏览器固定的必填字段
                        lay-verify: 需要验证的类型(值为 required 的话表示必填项)
                        autocomplete: 不设置自动填充
                    -->
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" required lay-verify="required">
                </div>
            </div>

            <!--
               下拉选择框
                   1. 通过selected属性设置默认选中项
                   2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
                   3. 可以通过 optgroup 标签给select分组
                   4. 通过设置lay-search属性开启搜索匹配功能
            -->
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <select name="city" lay-verify="required">
                        <option value="">请选择一个城市</option>
                        <option value="010">北京</option>
                        <option value="021" selected>上海</option>
                        <option value="0571" disabled>杭州</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <!-- 分组 -->
                    <select name="quiz">
                        <option value="">请选择</option>
                        <!-- 分组城市记忆 -->
                        <optgroup label="城市记忆">
                            <option value="你工作的第一个城市">你工作的第一个城市？</option>
                        </optgroup>

                        <!-- 分组学生时代 -->
                        <optgroup label="学生时代">
                            <option value="你的工号" selected>你的工号？</option>
                            <option value="你最喜欢的老师">你最喜欢的老师？</option>
                        </optgroup>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <!-- lay-search: 开启搜索匹配 -->
                    <select name="city" lay-verify="required" lay-search>
                        <option value ="">请选择</option>
                        <option value="010">layer</option>
                        <option value="021">form</option>
                        <option value="0571">layim</option>
                    </select>
                </div>
            </div>

<!--            复选框-->
            <div class="layui-form-item">
                <label class="layui-form-label">爱好</label>
<!--                开关风格-->
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作" checked>
                    <input type="checkbox" name="like[read]" title="阅读">
                    <input type="checkbox" name="like[rap]" title="rap">
                </div>
<!--                原始风格-->
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作" lay-skin="primary">
                    <input type="checkbox" name="like[read]" title="阅读" lay-skin="primary">
                    <input type="checkbox" name="like[rap]" title="rap" lay-skin="primary" checked>
                </div>
            </div>

<!--            开关-->
            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-skin="switch" checked>
                    <input type="checkbox" lay-skin="switch" lay-text="on|off">
                    <input type="checkbox" lay-skin="switch" lay-text="打开|关闭">
                    <input type="checkbox" lay-skin="switch" lay-text="打开|关闭" disabled>
                </div>
            </div>

<!--            单选框-->
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="0" title="男">
                    <input type="radio" name="sex" value="1" title="女" checked>
                </div>
            </div>

<!--            文本域-->
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">个人简介</label>
                <div class="layui-input-inline">
                    <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>

<!--            组装行内表单-->
            <div class="layui-form-item">
<!--                定义外层行内: layui-inline-->
                <div class="layui-inline">
                    <label class="layui-form-label">范围</label>
<!--                    定义内层行内：layui-input-inline-->
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!-- 定义外层行内 -->
                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <!-- 定义内层行内 -->
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="password" name="" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <button type="reset" class="layui-btn layui-btn-primary">查询</button>
                </div>
            </div>

<!--            按钮-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <script>
        layui.use('form', function () {
            var form = layui.form;
        });
    </script>
</body>
</html>